<template>
	<view class="u-loading-circle">
		<view class="logins">
			欢迎登录猿人博客
		</view>
		<view class="input">
			<u-form label-position="left" :error-type="errorType" ref="uForm" :model="form">
				<u-form-item label="手机号码:" label-width=auto; prop="phone" style="margin-left: 5vw;">
					<u-input type="text" v-model="form.phone" placeholder="请输入手机号码" />
				</u-form-item>
				<u-form-item label="密码:" label-width=auto; prop="password" style="margin-left: 5vw;">
					<u-input type="password" v-model="form.password" password="true" placeholder="请输入密码" />
				</u-form-item>
			</u-form>
		</view>
		<view>
			<u-button @tap="login" class="button">登录</u-button>  
			<view class="other">
				<navigator url="registers" @click="goRegister">注册账号</navigator>
			</view>
		</view>
	</view>
</template>
 
<script>
	//哈希密码MD5（不可逆）
	//引入加密密码
	import { MD5 } from "crypto-js";
	export default {
		data() {
			return {
				errorType: ['message'],
				form: {
					phone: '',
					password: '',
				},
				hasLogin: false,
                //下面这个你可以看一下官网，他解释比较详细
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'change'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}]
				}
			}
		},
		onLoad() {
			
		},
		onReady() {    //这个跟上面那个rules结合一起用的
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			//点击注册跳转到注册页面
			goRegister(){
				uni.navigateTo({
					url:'/pages/register/register'
				})
			},
			login() {
				const data = {
					phone: this.form.phone,
					// password: this.form.password,
					//引入后在注册和登录的地方进行加密
					password:MD5(this.form.password).toString(),
				};
				this.$refs.uForm.validate(valid => {   //这个是如果用户名和密码没有填写就不进入下一项操作
						if (valid) {
							console.log('验证通过');
						} else if (this.form.password == '') {
							console.log('请输入密码');
							console.log('验证失败');
						}
					}),
					uni.showLoading({     //这是加载事件，可以设置也可以不用设置
						title: '登录中...'
					})
				console.log(data);
				uni.request({
					url:"https://eggblog.bluej.cn/api/user/login",  //这里写的是登录接口
					data: {
						phone: this.form.phone,
						password: this.form.password
					},
					method: 'POST',
					dataType:'json',
					success: res => {
						console.log(res.data);
						if (res.data.code == 200) {   //这里做了个判断，报200就是代表成功
							uni.hideLoading();
							uni.showToast({          
								title: '登录成功',
								mask: true,
								duration: 1500
							})
							this.hasLogin = true;
							uni.setStorageSync('token',res.data.data.token);   //登录成功保存token
							setTimeout(() => {          //登录成功就跳转首页
								uni.switchTab({
									url: '/pages/index/index'
								}, 2000)
							})
						} else {            
							uni.showToast({       //如果没有登录成功，就显示那里错了
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			}
		}
	}
</script>
 
<style lang="scss" scoped>   
//这里写了一些比较简单的样式
	.u-loading-circle {
		.logins {
			font-size: 25px;
			color: #000000;
			display: flex;
			justify-content: center;
		}
 
		.button {
			width: 90vw;
			height: 10vw;
			background-color: #007AFF;
			margin-top: 2vh;
			color: #FFFFFF;
		}
 
		.other {
			margin-top: 2vh;
			display: flex;
			justify-content: center;
 
			::v-deep text {
				margin: 0 2vw;
			}
		}
	}
</style>
